<template>
  <div class="l-tab-page pd-8 ">
    <div class="l-rblock l-form-viewer" style="padding:8px;background: #fff;">
      <el-form
        :model="formData"
        :rules="rules"
        size="mini"
        labelPosition="right"
        labelWidth="140px"
        ref="form"
      >
        <el-row :gutter="0">
          <div class="l-rblock">
            <el-col :span="24">
              <el-divider content-position="left">招标信息</el-divider>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购方案编码" prop="f_code">
                <l-code
                  size="mini"
                  code="10000"
                  :getCode="lr_getCode"
                  v-model="formData.f_code"
                  :placeholder="$t('请输入')"
                ></l-code>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购方案名称" prop="f_text">
                <el-input v-model="formData.f_text" :placeholder="$t('请输入')">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购方式" prop="f_select">
                <l-select
                  :options="f_selectOptions"
                  v-model="formData.f_select"
                ></l-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="责任人" prop="f_user">
                <l-user-select v-model="formData.f_user"></l-user-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="责任部门" prop="f_department">
                <l-department-select
                  v-model="formData.f_department"
                ></l-department-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品与服务" prop="f_select2">
                <l-select
                  :multiple="true"
                  :options="f_select2Options"
                  v-model="formData.f_select2"
                ></l-select>
              </el-form-item>
            </el-col>

            <el-col :span="16">
              <el-form-item label="技术标小组" prop="f_textarea">
                <l-user-select
                  :multiple="true"
                  v-model="formData.f_textarea"
                ></l-user-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="商务标小组" prop="f_edit">
                <l-user-select
                  :multiple="true"
                  v-model="formData.f_edit"
                ></l-user-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否有标底" prop="f_radio">
                <l-radio
                  :options="f_radioOptions"
                  v-model="formData.f_radio"
                ></l-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业态类型" prop="f_checkbox">
                <l-select
                  :options="f_checkboxOptions"
                  v-model="formData.f_checkbox"
                ></l-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开标方式" prop="f_treeSelect">
                <l-select
                  :options="f_treeSelectOptions"
                  v-model="formData.f_treeSelect"
                ></l-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评标方式" prop="f_icon">
                <l-select
                  :options="f_treeSelectOptions"
                  v-model="formData.f_icon"
                ></l-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="技术标占比(%)" prop="f_Num">
                <el-input-number
                  controlsPosition="right"
                  :min="1"
                  :max="100"
                  v-model="formData.f_Num"
                  :placeholder="$t('请输入')"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商务标占比(%)" prop="f_rate">
                <el-input-number
                  controlsPosition="right"
                  :min="1"
                  :max="100"
                  v-model="formData.f_rate"
                  :placeholder="$t('请输入')"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属项目公司" prop="f_company">
                <l-layer-select
                  v-model="formData.f_company"
                  @change="handleCompanyChange"
                  labelKey="name"
                  valueKey="code"
                  :columns="columns"
                  :options="companyData"
                >
                </l-layer-select>
                <!--<l-company-select :companyList="lr_companyList" v-model="formData.f_company" ></l-company-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属项目" prop="f_password">
                <l-select
                  :options="projectOptions"
                  v-model="formData.f_password"
                ></l-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签约方式" prop="f_ccompany">
                <l-select
                  :options="f_treeSelectOptions"
                  v-model="formData.f_ccompany"
                ></l-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目标成本(含税)" prop="f_cdepartment">
                <el-input v-model="formData.f_cdepartment"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目标成本(不含税)" prop="f_cuser">
                <el-input v-model="formData.f_cuser"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="综合税率(%)" prop="f_swtich">
                <el-input v-model="formData.f_swtich"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税额" prop="f_swtich2">
                <el-input v-model="formData.f_swtich2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购类型" prop="f_muser">
                <l-select
                  :options="f_treeSelectOptions"
                  v-model="formData.f_muser"
                ></l-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否公开标底" prop="f_radio2">
                <l-radio
                  :options="f_radioOptions"
                  v-model="formData.f_radio2"
                ></l-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购周期(天)" prop="f_img">
                <el-input-number
                  controlsPosition="right"
                  v-model="formData.f_img"
                  :placeholder="$t('请输入')"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="中标单位数" prop="f_img2">
                <el-input-number
                  controlsPosition="right"
                  v-model="formData.f_img2"
                  :placeholder="$t('请输入')"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider content-position="left">采购方案计划</el-divider>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商入围时间" prop="f_time">
                <l-date
                  format="yyyy-MM-dd"
                  dateType="date"
                  :clearable="true"
                  v-model="formData.f_time"
                  :placeholder="$t('请选择')"
                >
                </l-date>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发标时间" prop="f_time2">
                <l-date
                  format="yyyy-MM-dd"
                  dateType="date"
                  :clearable="true"
                  v-model="formData.f_time2"
                  :placeholder="$t('请选择')"
                >
                </l-date>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="定标时间" prop="f_date">
                <l-date
                  format="yyyy-MM-dd"
                  dateType="date"
                  :clearable="true"
                  v-model="formData.f_date"
                  :placeholder="$t('请选择')"
                >
                </l-date>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="相关文档" prop="f_file">
                <l-upload v-model="formData.f_file"></l-upload>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <l-edit-table
                ref="f_children_table"
                addBtnText="新增一行"
                :isAddBtn="true"
                :isRemoveBtn="true"
                :isShowNum="true"
                :dataSource="f_children_data"
                :columns="f_children_columns"
                @addRow="handleF_childrenAddRow"
                @deleteRow="handleF_childrenDeleteRow"
              >
                <template v-slot:f1="scope">
                  <l-checkbox
                    :options="f_children_f_checkboxOptions"
                    v-model="scope.row.f1"
                  ></l-checkbox>
                </template>

                <template v-slot:f_text="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.f_text"
                    :placeholder="$t('请输入')"
                  >
                  </el-input>
                </template>
                <template v-slot:f_textarea="scope">
                  <l-layer-select
                    size="mini"
                    v-model="scope.row.f_textarea"
                    labelKey="name"
                    valueKey="code"
                    :columns="columns"
                    :options="companyData"
                  >
                  </l-layer-select>
                </template>
                <template v-slot:f_Num="scope">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.f_Num"
                  >
                  </el-switch>
                </template>
                <template v-slot:f_password="scope">
                  <el-input
                    size="mini"
                    type="password"
                    v-model="scope.row.f_password"
                    :placeholder="$t('请输入')"
                  >
                  </el-input>
                </template>
                <template v-slot:f_radio="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.f_radio"
                    :placeholder="$t('请输入')"
                  >
                  </el-input>
                </template>

                <template v-slot:f_checkbox="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.f_checkbox"
                    :placeholder="$t('请输入')"
                  >
                  </el-input>
                </template>
                <template v-slot:f3="scope">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.f3"
                  >
                  </el-switch>
                </template>
                <template v-slot:f4="scope">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.f4"
                  >
                  </el-switch>
                </template>
              </l-edit-table>
            </el-col>
          </div>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.formDataInit = this.$deepClone(this.formData);
  },
  data() {
    return {
      columns: [
        { label: "名称", prop: "name", minWidth: "110" },
        { label: "编码", prop: "code", minWidth: "110" },
      ],
      companyData: [
        { name: "公司1", code: "c1" },
        { name: "公司2", code: "c2" },
        { name: "公司3", code: "c3" },
        { name: "公司4", code: "c4" },
        { name: "公司5", code: "c5" },
      ],
      projectOptions: [],

      activeName: "tab0",
      formData: {
        f_text: "", // 下
        f_textarea: "", // 多行文本
        f_edit: "", // 编辑器
        f_Num: 30, // 计数器
        f_rate: 70, // 评分
        f_password: "", // 密码
        f_radio: "2", // 单选框组
        f_radio2: "",
        f_checkbox: "", // 多选框组
        f_select: "", // 下拉选择
        f_select2: "", // 下拉多选
        f_treeSelect: "", // 树形选择
        f_time: "", // 时间选择
        f_time2: "", // 时间范围
        f_date: "", // 日期选择
        f_datev: "", // 日期范围
        f_file: "", // 文件上传
        f_img: 0, // 图片上传
        f_img2: 1,
        f_company: "", // 公司选择
        f_department: "", // 部门选择
        f_user: "", // 人员选择
        f_ccompany: "", // 所属公司
        f_cdepartment: "", // 所属部门
        f_cuser: "", // 创建人员
        f_muser: "", // 修改人员
        f_cdate: "", // 创建时间
        f_mdate: "", // 修改时间
        f_code: "", // 单据编码
        f_icon: "", // 图标

        f_swtich: "", // 开关
        f_swtich2: 0, // 滑块
        f_color: "", // 颜色选择
      },
      rules: {},
      f_children_columns: [
        { id: "f1", prop: "f1", label: "勾选入围", width: 80, align: "center" },
        { id: "f2", prop: "f2", label: "首次入围状态", width: 100 },
        {
          id: "f_children_F_text",
          prop: "f_text",
          label: "未入围原因",
          minWidth: 120,
        },
        {
          id: "f_children_F_textarea",
          prop: "f_textarea",
          label: "供应商名称",
          minWidth: 120,
        },
        {
          id: "f_children_F_Num",
          prop: "f_Num",
          label: "是否交保证金",
          width: 120,
        },
        {
          id: "f_children_F_password",
          prop: "f_password",
          label: "产品与服务定级",
          width: 120,
        },
        {
          id: "f_children_F_radio",
          prop: "f_radio",
          label: "项目经理",
          width: 100,
        },
        {
          id: "f_children_F_checkbox",
          prop: "f_checkbox",
          label: "项目经理定级",
          width: 100,
        },
        { id: "f3", prop: "f3", label: "是否确认邀请", width: 100 },
        { id: "f4", prop: "f4", label: "是否新供应商", width: 100 },
      ],
      f_children_data: [],

      formDataInit: {},
    };
  },
  watch: {
    "formData.f_Num"(val) {
      this.formData.f_rate = 100 - val;
    },
    "formData.f_rate"(val) {
      this.formData.f_Num = 100 - val;
    },
  },
  computed: {
    f_radioOptions() {
      return [
        { value: "1", label: "是" },
        { value: "2", label: "否" },
      ];
    },
    f_checkboxOptions() {
      return [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" },
      ];
    },
    f_selectOptions() {
      return [
        { value: "1", label: "采购方式1" },
        { value: "2", label: "采购方式2" },
        { value: "3", label: "采购方式3" },
      ];
    },
    f_select2Options() {
      return this.lr_DataSourceOptions(
        this.lr_dataSourceData["dataitem"],
        "f_itemcode",
        "f_itemname"
      );
    },
    f_treeSelectOptions() {
      return [
        {
          label: "选项一",
          value: "0",
          children: [
            { label: "选项1-1", value: "11" },
            { label: "选项1-2", value: "12" },
          ],
        },
        { label: "选项二", value: "1" },
        { label: "选项三", value: "2" },
      ];
    },
    f_children_f_radioOptions() {
      return [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" },
      ];
    },
    f_children_f_checkboxOptions() {
      return [{ value: "1", label: "" }];
    },
    f_children_f_selectOptions() {
      return [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" },
      ];
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    handleCompanyChange(val) {
      this.projectOptions = [{ label: `${val.name}的项目`, value: "1" }];
    },
    init() {},
    handleF_childrenAddRow() {
      let point = {};
      point.f2 = "入围";
      point.f_text = "";
      point.f_textarea = "";
      point.f_Num = "";
      point.f_password = "";
      point.f_radio = "";
      point.f_checkbox = "";
      point.f_select = "";
      this.f_children_data.push(point);
    },
    handleF_childrenDeleteRow(event) {
      this.f_children_data.splice(event.index, 1);
    },

    // 重置表单
    resetForm() {
      this.$refs.form.resetFields();
      this.f_children_data = [];
    },
    // 校验表单
    validateForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (!this.$refs.f_children_table.validate()) {
              resolve(false);
              return;
            }

            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
    },
    // 设置表单数据
    setForm(data) {
      this.formData.f_text = data.f_parentEntity.f_text; // 下
      this.formData.f_textarea = data.f_parentEntity.f_textarea; // 多行文本
      this.formData.f_edit = data.f_parentEntity.f_edit; // 编辑器
      this.formData.f_Num = data.f_parentEntity.f_Num; // 计数器
      this.formData.f_password = data.f_parentEntity.f_password; // 密码
      this.formData.f_radio = data.f_parentEntity.f_radio; // 单选框组
      this.formData.f_checkbox = data.f_parentEntity.f_checkbox; // 多选框组
      this.formData.f_select = data.f_parentEntity.f_select; // 下拉选择
      this.formData.f_select2 = data.f_parentEntity.f_select2; // 下拉多选
      this.formData.f_treeSelect = data.f_parentEntity.f_treeSelect; // 树形选择
      this.formData.f_time = data.f_parentEntity.f_time; // 时间选择
      this.formData.f_time2 = data.f_parentEntity.f_time2; // 时间范围
      this.formData.f_date = data.f_parentEntity.f_date; // 日期选择
      this.formData.f_datev = data.f_parentEntity.f_datev; // 日期范围
      this.formData.f_file = data.f_parentEntity.f_file; // 文件上传
      this.formData.f_img = data.f_parentEntity.f_img; // 图片上传
      this.formData.f_company = data.f_parentEntity.f_company; // 公司选择
      this.formData.f_department = data.f_parentEntity.f_department; // 部门选择
      this.formData.f_user = data.f_parentEntity.f_user; // 人员选择
      this.formData.f_ccompany = data.f_parentEntity.f_ccompany; // 所属公司
      this.formData.f_cdepartment = data.f_parentEntity.f_cdepartment; // 所属部门
      this.formData.f_cuser = data.f_parentEntity.f_cuser; // 创建人员
      this.formData.f_muser = data.f_parentEntity.f_muser; // 修改人员
      this.formData.f_cdate = data.f_parentEntity.f_cdate; // 创建时间
      this.formData.f_mdate = data.f_parentEntity.f_mdate; // 修改时间
      this.formData.f_code = data.f_parentEntity.f_code; // 单据编码
      this.formData.f_icon = data.f_parentEntity.f_icon; // 图标
      this.formData.f_rate = data.f_parentEntity.f_rate; // 评分
      this.formData.f_swtich = data.f_parentEntity.f_swtich; // 开关
      this.formData.f_swtich2 = data.f_parentEntity.f_swtich2; // 滑块
      this.formData.f_color = data.f_parentEntity.f_color; // 颜色选择
      this.f_children_data = data.f_childrenList;
    },
    // 获取表单数据
    getForm() {
      let formData = {};
      formData.f_parentEntity = {};
      formData.f_parentEntity.f_text = this.formData.f_text; // 下
      formData.f_parentEntity.f_textarea = this.formData.f_textarea; // 多行文本
      formData.f_parentEntity.f_edit = this.formData.f_edit; // 编辑器
      formData.f_parentEntity.f_Num = this.formData.f_Num; // 计数器
      formData.f_parentEntity.f_password = this.formData.f_password; // 密码
      formData.f_parentEntity.f_radio = this.formData.f_radio; // 单选框组
      formData.f_parentEntity.f_checkbox = this.formData.f_checkbox; // 多选框组
      formData.f_parentEntity.f_select = this.formData.f_select; // 下拉选择
      formData.f_parentEntity.f_select2 = this.formData.f_select2; // 下拉多选
      formData.f_parentEntity.f_treeSelect = this.formData.f_treeSelect; // 树形选择
      formData.f_parentEntity.f_time = this.formData.f_time; // 时间选择
      formData.f_parentEntity.f_time2 = this.formData.f_time2; // 时间范围
      formData.f_parentEntity.f_date = this.formData.f_date; // 日期选择
      formData.f_parentEntity.f_datev = this.formData.f_datev; // 日期范围
      formData.f_parentEntity.f_file = this.formData.f_file; // 文件上传
      formData.f_parentEntity.f_img = this.formData.f_img; // 图片上传
      formData.f_parentEntity.f_company = this.formData.f_company; // 公司选择
      formData.f_parentEntity.f_department = this.formData.f_department; // 部门选择
      formData.f_parentEntity.f_user = this.formData.f_user; // 人员选择
      formData.f_parentEntity.f_ccompany = this.formData.f_ccompany; // 所属公司
      formData.f_parentEntity.f_cdepartment = this.formData.f_cdepartment; // 所属部门
      formData.f_parentEntity.f_cuser = this.formData.f_cuser; // 创建人员
      formData.f_parentEntity.f_muser = this.formData.f_muser; // 修改人员
      formData.f_parentEntity.f_cdate = this.formData.f_cdate; // 创建时间
      formData.f_parentEntity.f_mdate = this.formData.f_mdate; // 修改时间
      formData.f_parentEntity.f_code = this.formData.f_code; // 单据编码
      formData.f_parentEntity.f_icon = this.formData.f_icon; // 图标
      formData.f_parentEntity.f_rate = this.formData.f_rate; // 评分
      formData.f_parentEntity.f_swtich = this.formData.f_swtich; // 开关
      formData.f_parentEntity.f_swtich2 = this.formData.f_swtich2; // 滑块
      formData.f_parentEntity.f_color = this.formData.f_color; // 颜色选择
      formData.f_childrenList = this.f_children_data;

      return formData;
    },
  },
};
</script>
